<template>
  <div>
    <el-row class="print-none">
      <el-col :span="2">
        <!--el-icon-printer-->
        <el-button type="primary" size="small">暂定</el-button>
        <span class="by-null">'</span>
      </el-col>
      <el-col :span="4">
        <!-- 客户名称 -->
        <el-select
          v-model="value9"
          filterable
          remote
          reserve-keyword
          placeholder="客户名称"
          :remote-method="remoteMethod"
          :loading="loading">
          <el-option
            v-for="item in options4"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select v-model="value8" filterable placeholder="货运部名称">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-date-picker
          v-model="value7"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="实际发运开始日期"
          end-placeholder="实际发运结束日期"
          :picker-options="pickerOptions2">
        </el-date-picker>
      </el-col>
      <el-col :span="3">
        <el-input placeholder="系统订单号"></el-input>
      </el-col>
      <el-col :span="3">
        <span class="by-null">'</span>
      </el-col>
      <el-col :span="2" >
        <el-button type="primary" size="small" :loading="true">刷新</el-button>
      </el-col>
    </el-row>
    <hr style="border: .5px solid #e6e6e6">
      <el-table
        id="by-loadCar-table"
        border
        resizable
        ref="loadCar"
        :data="transportBillInfo"
        tooltip-effect="dark"
        style="width: 100%;display: block"
        @row-click= 'rowClick'
        :highlight-current-row="true">
        <!-- @row-click= ''    @selection-change="" -->
        <el-table-column fixed="left" prop="orderId" label="系统订单号" width="100"></el-table-column>
        <el-table-column prop="customerName" label="客户姓名" width="80"></el-table-column>
        <el-table-column prop="freight" label="货运部名称" width="100"></el-table-column>
        <el-table-column label="订单状态" width="100">
          <template slot-scope="scope">
            <el-tag type="success">
              {{scope.row.orderStatus | getOrderStatus}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="deliverGoodsTime" label="计划发运时间" width="140"></el-table-column>
        <el-table-column prop="deliverGoodsTime" label="实际发运时间" width="140"></el-table-column>
        <el-table-column prop="remarks" label="备注" width="200"></el-table-column>
        <el-table-column prop="customerPhone" label="客户电话" width="100"></el-table-column>
        <el-table-column prop="freightPhone" label="货运部电话" width="100"></el-table-column>
        <el-table-column prop="freightAddress" label="货运部地址" width="320"></el-table-column>
        <el-table-column prop="deliverGoodsTime" label="要求发运时间" width="140"></el-table-column>
        <el-table-column prop="deliverGoodsTime" label="要求发运时间" width="140"></el-table-column>
        <el-table-column prop="deliverGoodsTime" label="要求发运时间" width="140"></el-table-column>
        <el-table-column prop="deliverGoodsTime" label="要求发运时间" width="140"></el-table-column>
        <el-table-column prop="deliverGoodsTime" label="要求发运时间" width="140"></el-table-column>
        <el-table-column label="发往地址" width="300">
          <template slot-scope="scope">
            {{scope.row.destination+'-'+ scope.row.streetAddress}}
          </template>
        </el-table-column>
      </el-table>
    <hr style="border: .5px solid #e6e6e6">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400">
      </el-pagination>

    <hr class="print-none" style="border: .5px solid #e6e6e6">
    <el-row :gutter="10" class="print-none">
      <el-col :span="6">
        <el-card>
          <div slot="header" class="clearfix">
            <span>餐椅</span>
            <el-button style="float: right; padding: 3px 0" type="text" v-show="false">编辑</el-button>
          </div>
          <div class="text item order-item" v-if="orderDetailInfo.chairInfo" v-for="(item,key) in orderDetailInfo.chairInfo" :key="'chair'+key">
            <div>{{key+1}}, {{item.chair.value}}({{item.chair.name}},{{item.color|a}},{{item.board|a}})------{{item.number}} {{item.unit|a }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div slot="header" class="clearfix">
            <span>餐桌</span>
            <el-button style="float: right; padding: 3px 0" type="text" v-show="false">编辑</el-button>
          </div>
          <div  class="text item" v-if="orderDetailInfo.tableInfo" v-for="(item,key) in orderDetailInfo.tableInfo" :key="'table'+key">
            <div>{{key+1}}, {{item.table.value}}({{item.table.name}},{{item.color|a}},{{item.material|a}},{{item.size}})------{{item.number}}张</div>
            <ul>
              <li>台面:{{item.desktop.value}}({{item.desktop.name +','+ item.desktopSize}})---{{item.desktopNumber + '张'}}</li>
              <li>餐桌脚:{{item.footer|a}},{{item.footerMaterial|a}}</li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div slot="header" class="clearfix">
            <span>茶几</span>
            <el-button style="float: right; padding: 3px 0" type="text" v-show="false">编辑</el-button>
          </div>
          <div  class="text item" v-if="orderDetailInfo.teaTableInfo" v-for="(item, key) in orderDetailInfo.teaTableInfo" :key="'teaTable'+key">
            <div>{{key+1}}, {{item.teaTable.value}}({{item.teaTable.name}},{{item.color|a}},{{item.material|a}},{{item.size}})------{{item.number}}张</div>
            <ul>
              <li>台面:{{item.desktop.value}}({{item.desktop.name +','+ item.desktopSize}})---{{item.desktopNumber + '张'}}</li>
              <li>餐桌脚:{{item.footer|a}}, {{item.footerMaterial|a}}[脚]</li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div slot="header" class="clearfix">
            <span>电视柜</span>
            <el-button style="float: right; padding: 3px 0" type="text" v-show="false">编辑</el-button>
          </div>
          <div  class="text item" v-if="orderDetailInfo.tvTableInfo" v-for="(item, key) in orderDetailInfo.tvTableInfo" :key="'tvTable'+key">
            <div>{{key+1}}, {{item.tvTable.value}}({{item.name}},{{item.color|a}},{{item.material|a}},{{item.size}})------{{item.number}}张</div>
            <ul>
              <li>台面:{{item.desktop.value}}({{item.desktop.name +','+ item.desktopSize}})---{{item.desktopNumber + '张'}}</li>
              <li>餐桌脚:{{item.footer|a}},{{item.footerMaterial|a}}[脚]</li>
            </ul>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script type="text/javascript">
  import by_edit from './layer/editTransportBill'
  import bill_card from './layer/billCard'
  import { getList } from '@/api/transport/transportBill'
  import { getGoodsInfo } from '@/api/order/index'
  export default{
    name: 'loadCar',
    components: {
      by_edit,
      bill_card
    },
    created() {
      const that = this
      // 获取主列表
      getList().then(function(res) {
        if (res.data.success) {
          that.transportBillInfo = res.data.data
          console.log(that.transportBillInfo)
        }
      })
    },
    data() {
      return {
        data: '',
        transportBillInfo: [],
        orderDetailInfo: [],
        currentPage4: 4,
        options4: [],
        value9: [],
        list: [],
        loading: false,
        states: ['Alabama', 'Alaska', 'Arizona',
          'Arkansas', 'California', 'Colorado',
          'Connecticut', 'Delaware', 'Florida',
          'Georgia', 'Hawaii', 'Idaho', 'Illinois',
          'Indiana', 'Iowa', 'Kansas', 'Kentucky',
          'Louisiana', 'Maine', 'Maryland',
          'Massachusetts', 'Michigan', 'Minnesota',
          'Mississippi', 'Missouri', 'Montana',
          'Nebraska', 'Nevada', 'New Hampshire',
          'New Jersey', 'New Mexico', 'New York',
          'North Carolina', 'North Dakota', 'Ohio',
          'Oklahoma', 'Oregon', 'Pennsylvania',
          'Rhode Island', 'South Carolina',
          'South Dakota', 'Tennessee', 'Texas',
          'Utah', 'Vermont', 'Virginia',
          'Washington', 'West Virginia', 'Wisconsin',
          'Wyoming'],
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value8: '',
        value7: '',
        pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        }
      }
    },
    mounted() {
      this.list = this.states.map(item => {
        return { value: item, label: item }
      })
    },
    methods: {
      rowClick(row, event, column) {
        // row.forEach(row => {
        // this.$refs.multipleTable.toggleRowSelection(row)
        // })
        const temp = ['INPUT', 'SPAN', 'BUTTON']
        if (temp.indexOf(event.srcElement.nodeName) === -1 || !event.srcElement.className) {
          this.$refs.loadCar.clearSelection()
          this.$refs.loadCar.toggleRowSelection(row)
        } else {
          event.stopPropagation()
        }
        const that = this
        this.currentRowClickInfo = row
        this.currentOrderId = row.orderId
        // 获取订单详情
        getGoodsInfo({ orderId: row.orderId }).then((res) => {
          if (res.data.success) {
            that.orderDetailInfo = res.data.data
            that.orderDetailInfoClone = res.data.data
            console.log(res.data)
          }
        })
      },
      handleEite: function() {
        return 0
      },
      handlePrint: function() {
        return 0
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`)
      },
      remoteMethod(query) {
        if (query !== '') {
          this.loading = true
          setTimeout(() => {
            this.loading = false
            this.options4 = this.list.filter(item => {
              return item.label.toLowerCase()
                .indexOf(query.toLowerCase()) > -1
            })
          }, 200)
        } else {
          this.options4 = []
        }
      }
    }
  }
</script>

<style type="text/scss" scoped>
  .page {
    width:21cm;
    min-height:29.7cm;
    padding:2cm;
    margin:1cm auto;
    border:1px #D3D3D3 solid;
    border-radius:5px;
    background:white;
    box-shadow:0 0 5px rgba(0，0，0，0.1);
  }
  .subpage {
    padding:1cm;
    border:5px red solid;
    height:256mm;
    outline:2cm #FFEAEA solid;
  }
</style>
